<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、DOM方式操作元素属性<br><br>
			<div class="box box-re">
				例1：setAttribute<br><br>
				<input type="text" class="form-control" value="还没修改" readonly /><br><br><button class="btn btn-info">修改输入框内容</button> <code>aIpt1[0].setAttribute('value', '更改完毕')</code><br><br><button class="btn btn-info">读取输入框内容</button> <code>aIpt1[0].getAttribute('value')</code><br><br><button class="btn btn-info">移除输入框内容</button> <code>aIpt1[0].removeAttribute('value')</code>
			</div>
		</div>

		<div id="div2" class="box box-re form-inline">
			2、DOM元素灵活查找<br><br>
			<div class="box box-re">
				例1：选出所有元素 通过className条件筛选<br><br>
				<ul class="list-group">
					<li class="list-group-item">无</li>
					<li class="list-group-item class">class</li>
					<li class="list-group-item">无</li>
					<li class="list-group-item class">class</li>
					<li class="list-group-item class">class</li>
				</ul>
				<button class="btn btn-info">修改指定class的背景颜色</button> 未封装<br><br>
				<button class="btn btn-info">修改指定class的背景颜色</button> 已封装
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>元素属性操作：</b>第一种：<code>oDiv.style.display='block';</code> 第二种：<code>oDiv.style['display']='block';</code> 第三种：<code>DOM方式操作元素属性</code></p>
		</div>

	</BODY>

</HTML>